<script lang="ts">
	import Modal from '$lib/components/Feedback/Modal/Modal.svelte';
	import RectButton from '$lib/components/Basic/Button/RectButton.svelte';
	import ComponentPreview from '$lib/components/Others/ComponentBrowser/ComponentPreview.svelte';
    import Table from '$lib/components/Data/Table/Table.svelte';
	import TableColumn from '$lib/components/Data/Table/TableColumn.svelte';

	// 控制模态框显示状态
	let visible = false;
	let loadingModalVisible = false;
	let customModalVisible = false;

	// 加载状态
	let isLoading = false;

	// 打开普通模态框
	const openModal = () => {
		visible = true;
	};

	// 打开带加载状态的模态框
	const openLoadingModal = () => {
		loadingModalVisible = true;
		isLoading = true;

		// 模拟加载过程
		setTimeout(() => {
			isLoading = false;
		}, 2000);
	};

	// 打开自定义内容的模态框
	const openCustomModal = () => {
		customModalVisible = true;
	};

	// 模态框加载完成回调
	const handleModalLoaded = () => {
		console.log('Modal has been loaded');
	};

	const code1 = `<script lang="ts">
	import Modal from '$lib/components/Feedback/Modal/Modal.svelte';
	import RectButton from '$lib/components/Basic/Button/RectButton.svelte';

    // 控制模态框显示状态
	let visible = false;
	let loadingModalVisible = false;
	let customModalVisible = false;

	// 加载状态
	let isLoading = false;

	// 打开普通模态框
	const openModal = () => {
		visible = true;
	};

	// 打开带加载状态的模态框
	const openLoadingModal = () => {
		loadingModalVisible = true;
		isLoading = true;

		// 模拟加载过程
		setTimeout(() => {
			isLoading = false;
		}, 2000);
	};

	// 打开自定义内容的模态框
	const openCustomModal = () => {
		customModalVisible = true;
	};

	// 模态框加载完成回调
	const handleModalLoaded = () => {
		console.log('Modal has been loaded');
	};
<\/script>
<div class="example">
    <div class="example-group">
        <RectButton label="打开普通模态框" size="lg" variant="primary" onClick={openModal}
        ></RectButton>
        <RectButton
            label="打开带加载的模态框"
            size="lg"
            variant="success"
            onClick={openLoadingModal}
        ></RectButton>
        <RectButton label="打开自定义模态框" size="lg" variant="warning" onClick={openCustomModal}
        ></RectButton>
    </div>
</div>
<!-- 普通模态框 -->
<Modal
	{visible}
	title="普通模态框示例"
	initWidth="600px"
	initHeight="400px"
	onUpdateVisible={(value) => (visible = value)}
	onModalLoaded={handleModalLoaded}
>
	<div class="modal-content">普通模态框内容</div>
</Modal>

<!-- 带加载状态的模态框 -->
<Modal
	visible={loadingModalVisible}
	title="带加载状态的模态框"
	initWidth="600px"
	initHeight="400px"
	{isLoading}
	onUpdateVisible={(value) => (loadingModalVisible = value)}
	onModalLoaded={handleModalLoaded}
	><div class="modal-content">带加载状态的模态框内容</div>
</Modal>

<!-- 自定义的模态框 -->
<Modal
	visible={customModalVisible}
	title="自定义模板的模态框"
	initWidth="700px"
	initHeight="500px"
	onUpdateVisible={(value) => (customModalVisible = value)}
	onModalLoaded={handleModalLoaded}
>
	{#snippet modalTitle()}
		<div class="modalTitle">
			<span>自定义模板的模态框</span>
			<div class="tag">自定义</div>
		</div>
	{/snippet}
	<div class="modal-content">自定义模板的模态框内容</div>
	{#snippet modalFoot()}
		<div class="modalFoot">
			<RectButton label="取消" variant="primary" type="ghost" onClick={() => (customModalVisible = false)}
			></RectButton>
			<RectButton label="确认" variant="primary" onClick={() => (customModalVisible = false)}
			></RectButton>
		</div>
	{/snippet}
</Modal>`;
const attributesData = [
		{ id: 1, name: 'visible', describe: '是否显示', type: 'boolean', defaulValue: 'false' },
		{ id: 2, name: 'title', describe: '模态框标题', type: 'string', defaulValue: '' },
		{ id: 3, name: 'initWidth', describe: '模态框初始宽度', type: 'string', defaulValue: '500px' },
		{ id: 4, name: 'initHeight', describe: '模态框初始高度', type: 'string', defaulValue: '300px' },
		{ id: 5, name: 'isLoading', describe: '是否显示加载状态', type: 'boolean', defaulValue: 'false' },
        { id: 6, name: 'top', describe: '初始离顶部的距离', type: 'string', defaulValue: '100px' },
	];
const eventsData = [
    { id: 1, name: 'onUpdateVisible', describe: '更新显示状态', type: '(visible: boolean) => void' },
    { id: 2, name: 'onModalLoaded', describe: '模态框加载完成回调', type: '() => void' },
];
const slotData = [
    { id: 1, name: 'default', describe: 'Modal 内容', type: 'object' },
    { id: 2, name: 'modalTitle', describe: 'Modal 标题', type: 'object' },
    { id: 3, name: 'modalFoot', describe: 'Modal 底部', type: 'object' },
];
</script>

<div class="component-container">
	<div class="title">
		<div class="name">Modal 模态窗口</div>
		<div class="describe">模态弹窗，一般指「背景遮罩 + 居中浮层」的 Dialog，禁用背景交互。</div>
	</div>
	<div class="subtitle">
		<div class="name">基本用法</div>
		<div class="describe">展示「普通、带加载、自定义」的模态框。</div>
	</div>
	<ComponentPreview code={code1}>
		<div class="example">
			<div class="example-group">
				<RectButton label="打开普通模态框" size="lg" variant="primary" onClick={openModal}
				></RectButton>
				<RectButton
					label="打开带加载的模态框"
					size="lg"
					variant="success"
					onClick={openLoadingModal}
				></RectButton>
				<RectButton label="打开自定义模态框" size="lg" variant="warning" onClick={openCustomModal}
				></RectButton>
			</div>
		</div>
	</ComponentPreview>
    <div class="subtitle">
        <div class="name">Modal Attributes</div>
    </div>
    <Table data={attributesData} border={false} size="lg">
        <TableColumn key="name" title="属性名" align="left" minWidth={100} />
        <TableColumn key="describe" title="说明" align="left" minWidth={300} />
        <TableColumn key="type" title="类型" align="left" minWidth={300}>
            {#snippet cell(scope)}
                    {#if Array.isArray(scope.row.type)}
                    <span style="display:inline-flex; gap: 10px; flex-wrap: wrap;">
                        {#each scope.row.type as item}
                            <span class="tag">{item}</span>
                        {/each}
                    </span>
                    {:else}
                        <span>{scope.row.type}</span>
                    {/if}
            {/snippet}
        </TableColumn>
        <TableColumn key="defaulValue" title="默认值" align="left" minWidth={150} />
    </Table>
    <div class="subtitle">
		<div class="name">Modal Events</div>
	</div>
    <Table data={eventsData} border={false} size="lg">
		<TableColumn key="name" title="事件名" align="left" minWidth={100} />
		<TableColumn key="describe" title="说明" align="left" minWidth={300} />
		<TableColumn key="type" title="类型" align="left" minWidth={300}></TableColumn>
	</Table> 
    <div class="subtitle">
		<div class="name">CollapseItem Slot</div>
	</div>
    <Table data={slotData} border={false} size="lg">
		<TableColumn key="name" title="名称" align="left" minWidth={100} />
		<TableColumn key="describe" title="说明" align="left" minWidth={300} />
		<TableColumn key="type" title="类型" align="left" minWidth={300}></TableColumn>
	</Table>
</div>
<!-- 普通模态框 -->
<Modal
	{visible}
	title="普通模态框示例"
	initWidth="600px"
	initHeight="400px"
	onUpdateVisible={(value) => (visible = value)}
	onModalLoaded={handleModalLoaded}
>
	<div class="modal-content">普通模态框内容</div>
</Modal>

<!-- 带加载状态的模态框 -->
<Modal
	visible={loadingModalVisible}
	title="带加载状态的模态框"
	initWidth="600px"
	initHeight="400px"
	{isLoading}
	onUpdateVisible={(value) => (loadingModalVisible = value)}
	onModalLoaded={handleModalLoaded}
	><div class="modal-content">带加载状态的模态框内容</div>
</Modal>

<!-- 自定义的模态框 -->
<Modal
	visible={customModalVisible}
	title="自定义模板的模态框"
	initWidth="700px"
	initHeight="500px"
	onUpdateVisible={(value) => (customModalVisible = value)}
	onModalLoaded={handleModalLoaded}
>
	{#snippet modalTitle()}
		<div class="modalTitle">
			<span>自定义模板的模态框</span>
			<div class="tag">自定义</div>
		</div>
	{/snippet}
	<div class="modal-content">自定义模板的模态框内容</div>
	{#snippet modalFoot()}
		<div class="modalFoot">
			<RectButton label="取消" variant="primary" type="ghost" onClick={() => (customModalVisible = false)}
			></RectButton>
			<RectButton label="确认" variant="primary" onClick={() => (customModalVisible = false)}
			></RectButton>
		</div>
	{/snippet}
</Modal>

<style scoped lang="scss">
	.modal-content {
		font-size: 16px;
	}
	.modalTitle {
		display: flex;
		align-items: center;		
		span {
            margin-right: 10px;	
			line-height: 16px;
			font-size: 14px;
			font-weight: bold;
            color: var(--color-secondary-500);
		}
	}
    .modalFoot {
        padding: 10px;
        display: flex;
        justify-content: flex-end;
        gap: 10px;
    }
</style>
